<template>
  <!-- <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" /> -->
  <div class="app-container">
    <div>
      <el-form
        ref="map"
        :inline="true"
        :rules="rules"
        :model="map"
        size="mini"
      >
        <el-form-item label="搜索" prop="id">
          <el-input v-model="map.neiron" clearable placeholder="可搜索客户号或客户姓名" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="querylist"
          >查询</el-button>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handlecreate"
          >添加客户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="treeLoading"
      :data="tree.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      element-loading-text="Loading"
      border
      fit
      height="570"
      highlight-current-row
      row-key="id"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="55"
      />
      <el-table-column type="index" align="center" label="序号" width="50" />
      <el-table-column label="客户号" width="150" align="center" prop="id" />
      <el-table-column label="客户姓名" width="150" align="center" prop="name" />
      <el-table-column label="手机号" width="150" align="center" prop="phoneId" />
      <el-table-column label="客户等级" width="150" align="center" prop="type" />
      <el-table-column label="所在单位" width="150" align="center" prop="typeCount" />
      <el-table-column label="性别" width="150" align="center" prop="sex" />
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">
            修改
          </el-button>
          <!-- <el-button type="danger" size="small" @click="Coursedelete(scope.row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[15, 30]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tree.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加按钮页面 -->
    <el-dialog
      :visible.sync="createVisible"
      width="30%"
      :before-close="
        () => {
          createVisible = false
        }
      "
      :show-close="false"
    >
      <el-form
        ref="menuForm"
        :model="menuForm"
        :rules="rules"
        label-width="6vw"
      >
        <el-form-item label="姓名">
          <el-input
            v-model="menuForm.name"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="menuForm.psw"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model.number="menuForm.phoneId"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item label="公司名称">
          <el-input
            v-model="menuForm.typeCount"
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="职位">
          <el-input
            v-model="menuForm.type"
            placeholder="请输入职位"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="menuForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="cancelMenu">取消</el-button>
        <el-button type="primary" @click="createMenu">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改按钮 -->
    <el-dialog
      :visible.sync="editVisible"
      width="30%"
      :before-close="
        () => {
          editVisible = false
        }
      "
      :show-close="false"
    >
      <el-form
        ref="editmenuForm"
        :model="editmenuForm"
        :rules="rules"
        :label-position="labelPosition"
        label-width="7vw"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editmenuForm.name" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneId">
          <el-input v-model.number="editmenuForm.phoneId" placeholder="请输入数字" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="editmenuForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="editcancelMenu">取消</el-button>
        <el-button type="primary" @click="editMenu()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
// 使用mock
import { delectCustomer, getCustomer } from '@/api/personnel'
import { insertCustomer, postUpData } from '@/api/personnel'
import { query } from '@/api/personnel'
import { getToken } from '@/utils/auth'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      labelPosition: 'left',
      currentPage: 1, // 初始页
      pagesize: 15, //    每页的数据
      tree: [], // 页面数据
      rulesname: '', // 规则名称
      createVisible: false,
      editVisible: false,
      listLoading: true,
      input: '',
      select1: '',
      select2: '',
      select3: '',
      filterText: '',
      menuForm: {
        productState: '', // 产品类型
        workID: getToken().substring(1)
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        delivery: false
      },
      editmenuForm: { // 修改部分
        id: parseInt(getToken().substring(1)),
        name: '',
        sex: [0, 1], // 性别
        phoneId: '' // 手机号码
      },
      rules: {
        phoneId: [
          {
            require: true,
            type: 'number',
            message: '请输入数字',
            trigger: 'blur'
          }
        ]
      }, // 验证规则配置
      map: {
        neiron: '' // 搜索内容
      }, //  表单提交
      multipleSelection: [],
      multipleSelections: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 后端数据部分
    shujuqxi(response) { // 数据清洗
      var a = response.data
      for (let I = 0; I < a.length; I++) {
        if (a[I].sex) {
          a[I].sex = '男'
        } else {
          a[I].sex = '女'
        }
      }
      if (a != null) {
        this.tree = a
      }
    },
    fetchData() {
      this.treeLoading = true
      getCustomer({ token: getToken() }).then((response) => {
        this.shujuqxi(response)
        this.treeLoading = false
      })
    },
    // 分页
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(this.multipleSelection)
    },
    handleSizeChange: function(size) {
      this.pagesize = size
      // console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      // console.log(this.currentPage) // 点击第几页
    },
    // 表格颜色警告
    tableRowClassName({ row, rowIndex }) {
      if (row.Report === '无报告号') {
        return 'warning-row'
      }
      return ''
    },
    reset() {
      this.map.neiron = ''
    },
    querylist() {
      this.$refs['map'].validate((valid) => {
        if (valid) {
          if (this.map.neiron === '') {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          } else {
            query({ neiron: this.map.neiron }).then((response) => {
              this.shujuqxi(response)
            })
          }
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    handlecreate() { // 获取产品类型
      this.createVisible = true
    },
    setrulesname(data, index) { // 设置规则内容
      this.menuForm[this.rulesnames[index]] = data
    },
    cancelMenu() {
      this.createVisible = false
    },
    createMenu() {
      this.$refs['menuForm'].validate((valid) => {
        if (valid) {
          insertCustomer(this.menuForm).then((response) => {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          })
          this.createVisible = false
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    editcancelMenu() {
      this.editVisible = false
      // console.log(this.editmenuForm)
    },
    canceleditMenu() {
      // console.log(this.editmenuForm)
      this.editVisible = false
    },
    editMenu() { // 修改按钮
      this.$refs['editmenuForm'].validate((valid) => {
        if (valid) {
          postUpData(this.editmenuForm).then((response) => {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
      this.editVisible = false
    },
    handleEdit(id) { // 修改
      // console.log(id)
      if (id === parseInt(getToken().substring(1)) | getToken().substring(0, 1) === 'T') {
        this.editVisible = true
      } else {
        // console.log('没有操作权限')
        alert('没有操作权限')
      }
      // this.$refs.update.open();
    },
    Coursedelete(id) {
      if (id !== parseInt(getToken().substring(1))) {
        delectCustomer({ i: id }).then((response) => {
          this.fetchData()
        })
      } else {
        alert('不能删除自己')
      }
    }
  }
}
</script>
